import { TableColumn } from "@/components/GuatTable/types";
import { Avatar, Tag } from "@arco-design/web-vue";
import { RouteName } from "@/constant/route";
import GuatActions from "@/components/GuatActions/index.vue";
import Permissions from "@/constant/permission";
import {
  PointMultipleChangePropertyMap as PMCPM,
  PointTypePropertyMap as PTPM,
} from "@/map/point/property-map";
import { MemberPropertyMap as MPM } from "@/map/member/property-map";
import { MultipleChangeStatus as MCS } from "@/map/point/status-map";
import { Scenario } from "./types";

interface TableMethods {
  del: () => void;
  redo: () => void;
}

export const createTableColumns = (methods: TableMethods): TableColumn[] => {
  const router = useRouter();

  return [
    {
      title: "标题",
      dataIndex: PMCPM.Title,
    },
    {
      title: "积分类型",
      render: (record) => {
        return <>{record[PMCPM.PointType]?.[PTPM.Name]}</>;
      },
    },
    {
      title: "人数",
      dataIndex: PMCPM.NumberOfPeople,
    },
    {
      title: "操作人",
      render: (record) => (
        <div class="flex items-center gap-2">
          <Avatar size={24}>{record[PMCPM.Operator][MPM.Name][0]}</Avatar>
          {record[PMCPM.Operator][MPM.Name]}
        </div>
      ),
    },
    {
      title: "操作时间",
      dataIndex: PMCPM.ChangeTime,
    },
    {
      title: "当前状态",
      render: (record) => (
        <Tag size="large" color={record[PMCPM.Status] == MCS.EXECUTED ? "blue" : "red"}>
          {MCS[record[PMCPM.Status] as 0]}
        </Tag>
      ),
    },
    {
      showTitle: false,
      width: 120,
      render: (record) => {
        if (record[PMCPM.Status] == MCS.EXECUTED)
          return (
            <GuatActions
              actions={[
                {
                  internal: "check",
                  permission: Permissions.POINT_MULTIPLE_CHECK,
                  onClick: () =>
                    router.push({
                      name: RouteName.POINT_CHECK_MULTIPLE,
                      params: { id: record[PMCPM.Id] },
                    }),
                },
                {
                  internal: "withdraw",
                  permission: Permissions.POINT_MULTIPLE_WITHDRAW,
                  onClick: methods.redo,
                },
              ]}
            />
          );
        else
          return (
            <GuatActions
              actions={[
                {
                  internal: "edit",
                  permission: Permissions.POINT_MULTIPLE_EDIT,
                  onClick: () =>
                    router.push({
                      name: RouteName.POINT_EDIT_MULTIPLE,
                      params: { id: record[PMCPM.Id] },
                    }),
                },
                {
                  internal: "delete",
                  permission: Permissions.POINT_MULTIPLE_DEL,
                  onClick: methods.del,
                },
              ]}
            />
          );
      },
    },
  ];
};

export const createMultipleActionsTableColumns = (
  scenario: ComputedRef<Scenario>
): TableColumn[] => [
  {
    showTitle: false,
    render: (record) => {
      return (
        <div class="flex gap-4">
          <Avatar size={46}>{record[MPM.Name][0]}</Avatar>
          <div class="flex flex-1 flex-col justify-between">
            <div class="text-base">{record[MPM.Name]}</div>
            <div class="text-sm text-tc-3">{record[MPM.No]}</div>
          </div>
        </div>
      );
    },
  },
  {
    title: "性别",
    dataIndex: MPM.Gender,
  },
  {
    title: "联系方式",
    dataIndex: MPM.Tel,
  },
  {
    title: "班级",
    dataIndex: MPM.Class,
  },
  {
    title: "注册时间",
    dataIndex: MPM.RegisterTime,
  },
  {
    title: "当前积分",
    dataIndex: MPM.Points,
  },
  {
    showTitle: false,
    render: () => {
      if (scenario.value == "create") return <GuatActions actions={[{ internal: "delete" }]} />;
      else return <GuatActions actions={[]} />;
    },
  },
];
